<template>
  <div class="chart-box">
    <chart-topic header="全县种植种类"></chart-topic>
    <div class="chart-item">
      <div class="chart-tools">
        <div class="chart-tools-title">全县</div>
        <!-- <div>
          <el-date-picker
            :append-to-body="false"
            value-format="yyyy"
            @change="changeYear"
            size="mini"
            v-model="value"
            type="year"
            placeholder="2022">
          </el-date-picker>
        </div> -->
      </div>
      <div class="planting-charts" id="PlantingTypeChart">
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts'
import ChartTopic from '@/components/ChartTopic'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'PlantingType',
  mixins: [resize],
  components:{
    ChartTopic
  },
  props: {
    yearList: {
      type: Array,
      default: () => []
    },
    plantType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      value:'',
      chart: null,
    }
  },
  watch: {
    plantType: {
      handler(newVal) {
        if(newVal.length > 0) {
          this.setOptions()
        }
      }
    },
    yearList: {
      handler(newVal) {
        if(newVal.length > 0) {
          this.setOptions()
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if ( !this.chart ) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('PlantingTypeChart'))
      this.setOptions()
    },
    setOptions() {
      const colorList = ['#FD4E4E', '#38D6FC', '#2FC66F', '#FE942C']
      const series = this.plantType.map( (item, index) => {
        return {
          name: item.name,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: colorList[index % colorList.length],
              lineStyle: {
                color: colorList[index % colorList.length]
              }
            }
          },
          data: item.total
        }
      })
      const option = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '4%',
          top: '9%',
          containLabel: true
        },
        legend: {
          left:'17%',
          itemWidth: 8, //矩形宽度
          itemHeight: 3, //矩形高度
          textStyle: {
            color: '#ffffff',
            fontSize: 9 //这⾥⽤参数代替了
          }
        },
        tooltip: {
          transitionDuration:0,
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.yearList,
          axisLabel: {
            show: true,
            axisTick: {
              alignWithLabel: true
            },
            textStyle: {
              color: '#ffffff',
              fontSize: 10 //这⾥⽤参数代替了
            }
          }
        },
        yAxis: {
          nameGap:7,
          name:'价格(元/公斤)',
          nameTextStyle: {
            color: '#ffffff',
            fontSize:8,
          },
          splitLine:{
            show:false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize:10 //这⾥⽤参数代替了
            }
          },
          type: 'value',
        },
        series
      }
      this.chart.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-box{
  ::v-deep .el-input__inner{
    width: 1.28rem;
    height: 0.3rem;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color:#bfc3cb;
  }
}
::v-deep.el-date-editor{
  width: 100px;
}
</style>
<style scoped lang="scss">
.chart-tools{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem;

  .chart-tools-title{
    font-size: 0.02rem;
    position: relative;
    padding-left: 0.1rem;
  }
}
.chart-tools-title{

  &:before{
    content: '';
    background: #45FFB7;
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: calc(50% - 0.03rem);
  }
}
.chart-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart-item{
    flex:1;
    display: flex;
    flex-direction: column;
    .chart-tools{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.1rem;
    }
    #PlantingTypeChart{
      height: 100%;
      flex: 1;
    }
  }
}
.planting-charts{
  height: 100%;
}


</style>
